<template>
  <view class="w-full bg-#fff relative"
    :class="[{ 'dark-color': themeConfig.theme === 'dark' }]"
    @click="handleClick"
  >
    <!-- <wd-button v-if="data.path === '/feature/friends'" custom-class="share-btn" open-type="share">分享</wd-button> -->
    <view class="flex-sb-center leading-28rpx h-80rpx pl-32rpx pr-32rpx">
      <view class="flex-a-center">
        <i class="iconfont font-size-36rpx mr-16rpx color-inherit"
          :class="[leftIcon]"
          :style="{ color: data.color ? data.color : '' }"
        ></i>
        <view class="font-size-28rpx leading-0">
          {{ data.label }}
          <text class="color-#999 font-size-24rpx ml-12rpx">{{ desc1 }}</text>
          <text 
            class="font-size-24rpx ml-6rpx" 
            :style="{ color: desc2Color }"
          >{{ desc2 }}</text>
        </view>
      </view>
      <wd-icon name="arrow-right" size="36rpx"></wd-icon>
    </view>
    <view class="border-1px"></view>
  </view>
</template>

<script lang="ts" setup>
import { useThemeStore } from '@/store';
const emit = defineEmits(['handleClick'])
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  rightIcon: {
    type: String,
    default: 'icon-xiangzi'
  },
  leftIcon: {
    type: String,
    default: 'icon-xiangzi'
  },
  desc1: {
    type: String,
    default: ''
  },
  desc2: {
    type: String,
    default: ''
  },
  desc2Color: {
    type: String,
    default: '#fa4350'
  }
})
// 主题颜色
const { themeConfig } = useThemeStore()
const handleClick = () => {
  emit('handleClick', props.data)
}
</script>

<script lang="ts">
export default {
  // 微信小程序开启样式穿透
  options: { styleIsolation: "shared" },
};
</script>

<style lang="scss" scoped>
</style>
